<template>
  <div class="app-container">
    <router-link :to="'/rbac/user/add'">
      <el-button type="primary" size="mini">添加</el-button>
    </router-link>
    <el-table :data="list" fit border style="width: 100%">
      <el-table-column fixed prop="id" label="ID"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="trueName" label="真实名字"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="phone" label="手机"> </el-table-column>
      <el-table-column prop="avatar" label="头像" width="100">
        <template slot-scope="scope">
          <el-image :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <!-- 'v-model' directives require the attribute value which is valid as LHS.
            v-model的值必须是一个数据类型，而不是一个条件值或者计算值
           -->
          <el-switch
            v-model="scope.row.status === 1"
            @change="switchStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/rbac/user/update/' + scope.row.id">
            <el-button type="primary" size="mini">编辑</el-button>
          </router-link>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="selectByPage"
      :current-page="page"
      :total="total"
      :page-size="limit"
      layout="total, prev, pager, next"
    >
    </el-pagination>
    <!-- <button @click="test(1, $event)">点击</button> -->
  </div>
</template>
  
<script>
//引入user.js
import userApi from "@/api/rbac/user";

export default {
  name: "",
  data() {
    return {
      list: null, //表格对应的数据
      page: 1, //当前页
      limit: 5, //每页有多少条
      total: 0, //总记录数
    };
  },
  created() {
    this.selectByPage(this.page);
    /*userApi.selectByPage(this.page, this.limit).then((response) => {
      console.log(response);
      this.list = response.data.list;
      this.total = response.data.total;
    });*/
  },
  methods: {
    selectByPage(page = 1) {
      this.page = page;
      userApi.selectByPage(this.page, this.limit).then((jsonResult) => {
        console.log(jsonResult);
        this.list = jsonResult.data.list;
        //Invalid prop: type check failed for prop "total". Expected Number with value 8, got String with value "8".
        //把long类型转换成Number类型
        this.total = jsonResult.data.total - 0;
      });
    },
    handleEdit(row) {
      console.log(row);
    },
    handleDelete(row) {
      console.log(row);
      //弹出确认删除的提示框
      this.$confirm("您确认要删除么?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      }).then(() => {
        userApi.deleteById(row.id).then((jsonResult) => {
          if (jsonResult.ok) {
            this.$message({
              type: "success",
              message: jsonResult.msg,
            });
            //删除成功之后，查询最新的数据
            this.selectByPage();
          } else {
            this.$message({
              type: "error",
              message: jsonResult.msg,
            });
          }
        });
      });
    },
    switchStatus(row) {
      //对当前是status状态取反
      row.status = row.status === 1 ? 0 : 1;
      userApi.updateStatus(row.id, row.status).then((jsonResult) => {
        if (jsonResult.ok) {
          this.$message({
            type: "success",
            message: jsonResult.msg,
          });
        } else {
          this.$message({
            type: "error",
            message: jsonResult.msg,
          });
        }
      });
    },
    test(id, obj) {
      //event
      console.log(id, obj);
    },
  },
};
</script>
 
<style scoped>
</style>